<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">

<!--    设置标题-->
    <h1> 表白墙</h1>
    <p>输入后点击提交，会将信息显示在墙上</p>

    <div class="row">
        <span>谁</span>
        <input type="text" class="edit">
    </div>
    <div class="row">
        <span>对谁</span>
        <input type="text" class="edit">
    </div>
   <div class="row">
       <span>说什么</span>
       <input type="text" class="edit">
   </div>
    <div>
        <input type="button" value="提 交" id="submit">
    </div>
<!--    每次点击提交，都会在下面新增一个row,里面放置用户输入的话-->
</div>
<script>
    let submitButton=document.querySelector('#submit');
    submitButton.onclick=function () {
        //1.先获取到输入框中的内容
        let edits=document.querySelectorAll('.edit');
      let from=edits[0].value;
      let to=edits[1].value;
      let  message=edits[2].value;
        console.log(from+"对"+to+"说"+message);
        if(from =='' || to=='' || message==''){
            //对用户输入做一个简单的校验，验证当前输入是否是合法的提交
            return;
        }
        //2.根据内容构造 HTML 元素  (.row 里面包含用户输入的话);
        let row=document.createElement('div');
        row.className = 'row';
        row.innerHTML=from+' 对 '+to+' 说 '+message;
        //3.把这个新的元素添加到Dom树上
        let container=document.querySelector('.container');
        container.appendChild(row);
        //4.清空原来的输入框
        for(let i=0;i<edits.length;i++){
            edits[i].value='';
        }
    }
</script>
<style>
    * {
        margin:0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        width: 400px;
        margin: 0 auto;
    }
    h1{
        text-align: center;
        padding: 20px 0;
        color:red;
    }
    p{
        text-align: center;
        color:#666;
        padding: 10px 0;
        font-size: 14px;
    }
    .row{
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    span{
        width: 90px ;
        font-size: 20px;
        color: black;
    }
    input{
        width: 310px;
        height: 40px;

    }

    #submit{
        width: 400px;
        color: white;
        background-color: orange;
        border: none;
        border-radius: 14px;
        font-size: 18px;
    }
    #submit:active{
        background-color: blue;
    }

    .edit{
        font-size: 18px;
        padding-left: 5px;
    }
</style>
</body>
</html>
